<template>
  <!--<transition name="el-fade-in-linear">-->
  <div class="main-bg">
    <div class="first">
      <el-row >
        <el-button  class="el-icon-plus" type="primary" @click="addClick()" size="mini">
          添加
        </el-button>
        <el-button :disabled="radio==''" class="el-icon-view" type="primary" @click="editClick()" size="mini">
          编辑/查看
        </el-button>
      </el-row>
      <div style="height:5px;">&nbsp;</div>
      <!-- 用户搜索选项组件 -->
      <vsearchtag  @toSearchFilter="toSearchFilter" :chooseParams="pageinfo.params.findParams" />
      <div style="height:5px;">&nbsp;</div>
    </div>
    <el-table
      border
      :row-class-name="tableRowClassName"
      style="width:100%"
      :max-height="slide_h"
      @header-contextmenu="showMenu"
      :empty-text="(data.data!=null&&data.data.length==0)?'空空如也':'数据初始化中...'"
      :data="data.data"
      ref="table"
      size="small"
      highlight-current-row
      @current-change="cellClick"
    >
      <el-table-column  label="#"  width="50" center>
        <template slot-scope="scope">
          <el-radio  :label="scope.row.id" v-model="radio">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column  width="60" prop="id" label="ID"/>
      <el-table-column prop="title" label="标题"/>
      <el-table-column width="60" label="缩略图" align="center" >
        <template slot-scope="scope">
          <!--<el-popover-->
          <!--placement="right"-->
          <!--trigger="hover">-->
          <!--<img style="height:240px;width:200px;" :src="resourceURL+scope.row.imageUrl"/>-->
          <img slot="reference" class="cursor" style="width:60px;height:30px;" :src="proAPI.RESOURCE_URL+scope.row.thumbNailImagePath" />
          <!--</el-popover>-->
        </template>
      </el-table-column>
      <el-table-column  width="90" >
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.type"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          <span v-if="scope.row.type==1">
            <el-tag>{{pageinfo.params.findParams.type.conditions.options[scope.row.type-1].alias}}</el-tag>
          </span>
          <span v-else-if="scope.row.type==2">
            <el-tag type="info">{{pageinfo.params.findParams.type.conditions.options[scope.row.type-1].alias}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column width="90" >
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.skipWay"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          <el-tag>{{pageinfo.params.findParams.skipWay.conditions.options[scope.row.skipWay].alias}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="跳转链接"/>
      <el-table-column width="90" >
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.state"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          <span v-if="scope.row.state==0">
            <el-tag>{{states[scope.row.state].alias}}</el-tag>
          </span>
          <span v-else-if="scope.row.state==1">
            <el-tag type="success">{{states[scope.row.state].alias}}</el-tag>
          </span>
          <span v-else="scope.row.state==2">
            <el-tag type="danger">{{states[scope.row.state].alias}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.operator"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.operator}}
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="header" >
          <vproper :bottom="'bottom-end'" :findParams="pageinfo.params.findParams.createTime"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.createTime}}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后更新时间"/>
    </el-table>
    <div class="first">
      <v-page v-if="pageinfo.pages!=null" :pageinfo='pageinfo' @changepageinfo="changepaginfo"/>
    </div>
    <v-dialog v-if="dialoginfo.show == 1"
              :dialoginfo="dialoginfo"
              @changedialogshow="changedialogshow"/>
  </div>
  <!--</transition>-->
</template>
<script>
  const pagination = () =>
    import ("@/components/pagination/pagetemplate")
  import tsearchtag from "@/components/search/template_tag_search"
  import tproper from "@/components/search/template_proper_search"
  const dialog = () =>
    import ("@/components/modules/sysManagement/banner/view_dialog_editSysBanner")
  export default {
    inject:["reload"],
    components: {
      "v-page": pagination,
      "vproper": tproper,
      "vsearchtag":tsearchtag,
      "v-dialog":dialog
    },
    data() {
      return {
        RESOURCE_URL:this.proAPI.RESOURCE_URL,
        dialoginfo: {
          show:0,
          title:'',
          url:'',
          data:''
        },
        data: "",
        slide_h:document.body.offsetHeight - (224),
        loadingTxt: "",
        radio: "",
        currentData: "",
        pageinfo: this.$store.getters.getPageInfo(this.$route.path,this.proAPI.tableConfig.sysBanner),
        search: "",
        states:this.$store.getters.getPageInfo(this.$route.path,this.proAPI.tableConfig.sysBanner).params.findParams.state.conditions.options
      }
    },
    methods: {
      init() {
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.findAllSysBanner,lock:1,text:this.loadingTxt});
        this.proAPI.getJson(this.proAPI.URLS.findAllSysBanner,this.proUtil.generateParams(this.pageinfo.params)).then((res) => {
          this.data = res;
          this.pageinfo.pages = res.pages;
          this.pageinfo.total = res.total;
        })
      },
      cellClick(currentRow,oldCurrentRow) {
        if(currentRow!=undefined){
          this.currentData = currentRow;
          this.radio = currentRow.id
        }
      },
      editClick() {
        this.dialoginfo = {
          show:1,
          title:'修改轮播设置',
          url:this.proAPI.URLS.modifySysBanner,
          data:{
            id:this.currentData.id,
            title:this.currentData.title,
            imagePath:this.currentData.imagePath,
            thumbNailImagePath:this.currentData.thumbNailImagePath,
            url:this.currentData.url,
            skipWay:this.currentData.skipWay,
            type:this.currentData.type,
            state:this.currentData.state,
          }
        };
      },
      addClick() {
        this.dialoginfo = {
          show:1,
          title:'新增轮播设置',
          url:this.proAPI.URLS.addSysBanner,
          data:{
            title:'',
            imagePath:'',
            thumbNailImagePath:'',
            url:'',
            skipWay:0,
            type:1,
            state:0,
          }
        };
      },
      changepaginfo() {
        this.$store.commit("savePageInfo",this.pageinfo);
        this.init();
      },
      changedialogshow() {
        this.dialoginfo.show = 0;
      },
      toSearchFilter(){
        //需要初始化一下选中状态
        this.currentData = "";
        this.radio = "";
        this.pageinfo.params.page=1;
        this.init();
      },
    },
    mounted() {
      this.init();
    },
    updated() {
      // console.log(333);
    }
  }
</script>
<style scoped>
  .el-table .success-row {
    background: #f0f9eb;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .success {
    text-color: #67C23A
  }

  .danger {
    text-color: #F56C6C
  }
  .mgbottom {
    margin-bottom: 5px;
  }

  .imgMiddle {
    height: 37px;
    vertical-align: middle
  }
</style>
